<script>
import { getVehicleList } from "@/api/publish"
export default {
	props: ["vehicleList"],
	data() {
		return {
			params: {
				// 用户id
				user_id: uni.getStorageSync('user_id'),
				// 载具id
				car_category_id: 0,
				// 运输方式: 0不限 1其他 2汽运 3空运 4海运 5铁路
				mode: '',
				// 状态: 1空闲 2待出发 3进行中 4停用
				status: ''
			},
			statusTitle: this.$t('全部状态'),
			modeTitle: this.$t('全部运输方式'),
			statusList: [
				{ id: "", name: this.$t('全部状态') },
				{ id: 1, name: this.$t('空闲') },
				{ id: 2, name: this.$t('待出发') },
				{ id: 3, name: this.$t('进行中') },
				{ id: 4, name: this.$t('停用') }
			],
			modeList: [
				{ id: "", name: this.$t('全部运输方式') },
				{ id: 1, name: this.$t('其他') },
				{ id: 2, name: this.$t('汽运') },
				{ id: 3, name: this.$t('空运') },
				{ id: 4, name: this.$t('海运') },
				{ id: 5, name: this.$t('铁路') }
			],
			checkedItem: {},
			carChechFlag: false,
			carList: [

			]
		}
	},
	created() {
		this.getVehicleList()
		uni.$on("getVehicleList", () => {
			this.getVehicleList()
		})
	},
	methods: {
		async getVehicleList() {
			const res = await getVehicleList(this.params)
			console.log(res.data.data.data)
			this.carList = res.data.data.data
		},
		submit() {
			this.carChechFlag = false
			console.log('this.$props.vehicleList--', this.$props.vehicleList)
			this.$props.vehicleList.map(item => {
				if (item.selectedItem && (item.selectedItem.car_number == this.checkedItem.car_number)) {
					this.carChechFlag = true
				}
			})
			if (this.carChechFlag) {
				uni.$u.toast('该车辆已选择')
				return
			} else {
				console.log('7777777')
				if (!this.checkedItem.id) return this.toast('请选择车辆')
				this.$emit('submit', this.checkedItem)
			}
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		addCar() {
			uni.navigateTo({
				url: '/pages/driverTask/addDriver'
			})
		}
	}
}
</script>
<template>
	<view class="h-full flex flex-col" style="align-items: stretch;">
		<!-- <pre style="font-family: '微软雅黑';line-height: 2;">
			{{ params }}
		</pre> -->
		<!-- <div style="height:50rpx"></div>
				<div class="header">
					<div class="back center" @click="back">
						<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
					</div>
					{{$t('选择车辆')}}
				</div> -->
		<div class="between pt-16 pl-24 pr-24">

			<div class="h-80  bg-white rounded-18 mr-18 pl-20 pr-20" style="white-space: nowrap;">
				<picker range-key="name" mode="selector" :range="statusList" @change="() => {
					params.status = statusList[$event.detail.value].id
					statusTitle = statusList[$event.detail.value].name
					getVehicleList()
				}">
					<div class="between h-80">
						<div class="fz24 text-333 mr-10">{{ statusTitle }}</div>
						<image src="/static/icon/down.png" mode="widthFix" class="w-20 mt-5"></image>
					</div>
				</picker>
			</div>

			<div class="h-80 bg-white rounded-18 w-full">
				<picker range-key="name" mode="selector" :range="modeList" @change="() => {
					params.mode = modeList[$event.detail.value].id
					modeTitle = modeList[$event.detail.value].name
					getVehicleList()
				}">
					<div class="between h-80 w-full pl-20 pr-20">
						<div class="fz24 text-333 mr-10">{{ modeTitle }}</div>
						<image src="/static/icon/down.png" mode="widthFix" class="w-20 mt-5"></image>
					</div>
				</picker>
			</div>
			<div class="h-80 bg-white rounded-18 ml-18 pl-20 pr-20 center w-400" @click="addCar">
				<image src="../../../static/icon/add.png" class="w-25 h-25" mode=""></image>
				<p class="text-888 fz24 ml-10">{{$t('添加车辆')}}</p>
			</div>
		</div>



		<!-- work active -->
		<div class="flex-1" style="overflow-y: auto;">
			<div class="vehicle-item"
				:class="{ 'active': item.id && checkedItem.id === item.id, 'work': item.status != 1 }"
				v-for="(item, index) in carList" @click="() => {
					// if (item.status == 1) {	}
					checkedItem = checkedItem == item ? {} : item
				}">
				<div class="status">
					<span v-if="item.status === 1">{{$t('空闲中')}}</span>
					<span v-if="item.status === 2">{{$t('待出发')}}</span>
					<span v-if="item.status === 3">{{$t('进行中')}}</span>
					<span v-if="item.status === 4">{{$t('停用')}}</span>
				</div>
				<div class="content" style="padding:45rpx 58rpx;">
					<div class="flex">
						<div class="fz30 font-bold">{{ item.name }}</div>
						<div class="card">
							<div class="text">
								<text>{{ item.car_number }}</text>
								<text v-if="item.trailer_number">{{$t('挂')}}{{ item.trailer_number }}</text>
							</div>

						</div>
					</div>
					<div class="flex mt-22">
						<div class="flex-shirnk-0 flex">
							<image src="/static/icon/address.png" mode="widthFix" class="w-20 default-address-icon">
							</image>
							<image src="/static/icon/address-o.png" mode="widthFix" class="w-20 work-address-icon">
							</image>
							<div class="text-888 fz22 ml-8 mr-8 address-text">{{ get(item, "area.name") }}</div>
						</div>
						<div class="address">
							{{$t('最近打卡点')}}：{{ get(item, "area.mergename") }}
							{{ new Date(item.updatetime * 1000).toLocaleString() }}
						</div>
					</div>
					<div class="between mt-24" style="border-radius: 16rpx;overflow: auto;white-space: nowrap;">
						<div class="flex flex-col pt-16 pb-16 pl-30 pr-30 mr-16 rounded-16"
							style="background-color: #F8F8F8;">
							<div class="font-bold fz25 text-333">{{ item.car_category_name.title }}</div>
							<div class="fz22 text-666 mt-10">{{$t('车型')}}</div>
						</div>
						<div class="flex flex-col pt-16 pb-16 pl-30 pr-30 mr-16 rounded-16"
							style="background-color: #F8F8F8;">
							<div class="font-bold fz25 text-333">{{ item.car_l }}*{{ item.car_w }}*{{ item.car_h }}
							</div>
							<div class="fz22 text-666 mt-10">{{$t('车厢尺寸')}}(m)</div>
						</div>
						<div class="flex flex-col pt-16 pb-16 pl-30 pr-30 mr-16 rounded-16"
							style="background-color: #F8F8F8;">
							<div class="font-bold fz25 text-333">{{ item.product_weight }}{{$t('吨')}}</div>
							<div class="fz22 text-666 mt-10">{{$t('载重')}}</div>
						</div>
						<div class="flex flex-col pt-16 pb-16 pl-30 pr-30 mr-16 rounded-16"
							style="background-color: #F8F8F8;">
							<div class="font-bold fz25 text-333">{{ item.product_volume }}m³</div>
							<div class="fz22 text-666 mt-10">{{$t('体积')}}</div>
						</div>
					</div>

					<div class="between mt-12 rounded-8 p-18 data" style="background-color: #EAF6FF;position:relative">
						<div class="current">{{$t('当前')}}</div>
						<div class="flex ml-50">
							<div class="text-666 fz22">{{$t('曝光量')}}：</div>
							<div class="fz22 text-333 font-bold">{{ item.exposure_number }}</div>
						</div>
						<div class="flex">
							<div class="text-666 fz22">{{$t('查看量')}}：</div>
							<div class="fz22 text-333 font-bold">{{ item.lookat_number }}</div>
						</div>
						<div class="flex mr-50">
							<div class="text-666 fz22">{{$t('咨询量')}}：</div>
							<div class="fz22 text-333 font-bold">{{ item.comment_number }}</div>
						</div>
					</div>

					<div class="select-state">
						{{$t('可选')}}
					</div>

					<div class="flex justify-end mt-22 mb-9 fz24">
						<image src="/static/icon/message.png" mode="widthFix" class="w-25"></image>
						<div class="text-888 ml-8 text-888">{{$t('联系')}}TA</div>
					</div>

				</div>
			</div>
			<div style="height: 250rpx;"></div>
		</div>


		<div class="form-control p-30 bg-white between">
			<div class="submit center h-100 fz30 rounded-50 mr-20 text-gray-600 pl-30 pr-30 refresh-car"
				style="background: #f5f5f5;" @click="getVehicleList">
				<image src="/static/icon/reset.png" class="w-30 h-30 mr-10"></image>
				{{$t('刷新车辆')}}
			</div>
			<div class="submit center h-100 bg-primary text-white fz32 rounded-50 flex-1" @click="submit">
				{{$t('确定')}}
			</div>
		</div>


	</view>
</template>



<style lang="less">
.refresh-car:active {
	background-color: #ddd !important;
}

.work-address-icon {
	display: none;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.work.active {
	.content {
		background-image: url("/static/bg/vehicle-selected-work.png") !important;
	}

	.select-state {
		background-image: url("/static/bg/vehicle-selected-focus-2.png") !important;
	}
}

.work {
	.current {
		background: linear-gradient(288.98deg, #FF9F02 2.03%, #FF5D02 104.95%) !important;
	}

	.select-state {
		background-image: url("/static/bg/vehicle-selected-default-2.png");
	}

	.content {
		background-image: url("/static/bg/vehicle-item-bg-work.png") !important;
	}

	.data {
		background-color: #FFF7EA !important;
	}

	.status {
		background: linear-gradient(100.15deg, #FF5401 4%, #FFB601 81.09%) !important;
	}

	.address-text {
		color: #FF5D02;
	}

	.default-address-icon {
		display: none;
	}

	.work-address-icon {
		display: block;
	}

	.address {
		background-color: #FFF7EA;
		color: #FF5D02B5;
	}
}

.select-state {
	width: 150rpx;
	height: 44rpx;
	background-image: url("/static/bg/vehicle-selected-default.png");
	background-size: 100%;
	color: #fff;
	font-size: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 34rpx;
	left: 26rpx;
}


.justify-end {
	justify-content: flex-end;
}

.current {
	width: 28rpx;
	color: #fff;
	position: absolute;
	background: linear-gradient(288.98deg, #66D6E2 2.03%, #278AFF 104.95%);
	height: 100%;
	left: 0;
	font-size: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 8rpx 0 0 8rpx;
}

.address {
	background-color: #E9F6FF;
	font-size: 16rpx;
	color: #518AD4B5;
	padding: 5rpx 12rpx;
	border-radius: 6rpx;
}

.card {
	background-color: #FCCE00;
	color: #1D1D1D;
	border-radius: 6rpx;
	padding: 2rpx;
	margin-left: 10rpx;
	font-size: 22rpx;

	.text {
		padding: 6rpx 10rpx;
		font-weight: bold;
		border: 0.5px solid #1D1D1D78;
	}
}

.active {
	.content {
		background-image: url("/static/bg/vehicle-selected-bg.png") !important;
	}

	.select-state {
		background-image: url("/static/bg/vehicle-selected-focus.png") !important;
	}
}

.vehicle-item {
	margin-top: 16rpx;
	height: 365rpx;
	position: relative;
	margin-bottom: 60rpx;

	.content {
		background-image: url("/static/bg/vehicle-item-bg.png");
		background-size: 100% 100%;
		width: 100%;
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;
	}

	.status {
		width: 200rpx;
		height: 70rpx;
		position: absolute;
		z-index: 1;
		right: 25rpx;
		top: 25rpx;
		background: linear-gradient(100.15deg, #66D6E2 4%, #278AFF 81.09%);
		border-radius: 0 15rpx 0 0;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		padding-left: 50rpx;
		padding-top: 10rpx;
		font-weight: 500;
	}

}


page {
	background-color: #F6F7FB;
}
</style>